<template>
	<view class="main-content">
		<scroll-view scroll-y class="list-box" :style="{'height': '100vh' }">
			<text class="title">{{articleDetail.title}}</text>
			<view class="publisher">
				<image src="" mode="widthFix"></image>
				<view>
					<text>消易云</text>
					<text>{{articleDetail.createTime}} 发布</text>
				</view>
			</view>
			<rich-text class="text-content" :nodes="articleDetail.contentText"></rich-text>
		</scroll-view>
	</view>
</template>

<script>
	import Home from '@/api/home.js'
	import {formatterImage} from '@/utils/index.js'
	export default {
		data() {
			return {
				articleId: "",
				articleDetail: {}
			}
		},
		onLoad(e) {
			this.articleId = e.id;
			this.getArticleDetail();
		},
		methods: {
			// 获取文章列表
			async getArticleDetail() {
				let res = await Home.getArticleDetail(this.articleId);
				this.articleDetail = Object.assign(res.data, {contentText: formatterImage(res.data.contentText)});
			}
		}
	}
</script>

<style scoped lang="less">
	.main-content {
		width: 100%;
		height: 100vh;

		.list-box {
			padding: 20rpx 30rpx;
			background: #ffffff;
			width: 100%;
			box-sizing: border-box;
			.title {
				font-family: "PingFang SC";
				font-size: 40rpx;
				font-style: normal;
				font-weight: 500;
				line-height: 60rpx;
			}

			.publisher {
				display: flex;
				align-items: center;
				margin: 30rpx 0;

				image {
					width: 48rpx;
					height: 48rpx;
					background: #ababab;
					border-radius: 50%;
				}

				view {
					margin-left: 12rpx;

					text {
						display: block;
						color: #000000;
						font-family: "PingFang SC";
						font-style: normal;
						line-height: normal;

						&:nth-of-type(1) {
							opacity: 0.9;
							font-size: 28rpx;
							font-weight: 400;
						}

						&:nth-of-type(2) {
							opacity: 0.4;
							font-size: 20rpx;
							font-weight: 400;
						}
					}
				}
			}

			.text-content {
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 56rpx;
				opacity: 0.9;
				image, img {
					width: 95% !important;
				}
			}
		}
	}
</style>